<template>
  <div style="margin:0 auto;width: 1200px;">
    <!--顶部流量表格-->
    <!--Top10房源信息表-->
    <div style="float: left;font-weight: bold;color: #909399;margin-top: 15px;">Top10来源网站</div>
    <div style="float: right;font-weight: bold;color: #909399">更多</div>
    <el-table>
      <el-table-column label="房源"></el-table-column>
      <el-table-column label="所在城市"></el-table-column>
      <el-table-column label="浏览量(PV)"></el-table-column>
      <el-table-column label="城市用户数量"></el-table-column>
      <el-table-column label="占比"></el-table-column>
    </el-table>
    <!--中部折线图-->
    <el-icon :size="30" style="float: left;margin-top: 20px">
      <Histogram/>
    </el-icon>
    <div
        style="float: left;display:inline-block;vertical-align: middle;margin-top: 27px;color: #909399;font-weight: bold;">
      流量统计 {{ chart.name }}
    </div>
    <div id="line" style="width: 1000px;height:400px;margin-top:75px;"></div>
    <!--区域分布地图表-->
    <el-icon :size="30" style="float: left;">
      <Histogram/>
    </el-icon>
    <div
        style="float: left;display:inline-block;vertical-align: middle;margin-top: 7px;color: #909399;font-weight: bold;">
      区域分布 {{ chart.name }}
    </div>
    <div id="china" style="width: 1000px;height:800px;margin-top:75px;"></div>


  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import * as echarts from 'echarts';


const lineOption = {
  dataZoom: {
    id: 'dataZoomX',
    type: 'slider',
    xAxisIndex: [0],
    filterMode: 'filter',
    show: true,
    handleSize: 8,
    orient: 'horizontal',
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['pv', 'uv']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '12%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [
      '2024/3/26', '2024/3/27', '2024/3/28', '2024/3/29', '2024/3/30', '2024/3/31', '2024/4/1', '2024/4/2',
      '2024/4/3', '2024/4/4', '2024/4/5', '2024/4/6', '2024/4/7', '2024/4/8', '2024/4/9', '2024/4/10',
      '2024/4/11', '2024/4/12', '2024/4/13', '2024/4/14', '2024/4/15', '2024/4/16', '2024/4/17', '2024/4/18',]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'pv',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
        210, 120, 132, 101, 134, 90, 230, 210, 99, 77, 48]
    },
    {
      name: 'uv',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 11, 99, 212]
    }
  ]
};
const menuArr = ref([
  {name: '今天', id: 0}, {name: '昨天', id: 1}, {name: '最近7天', id: 2}, {name: '最近30天', id: 3}, {
    name: '最近3个月',
    id: 4
  },
])
const selectMenu = (index) => {

}
const chart = ref({name: '今天'});
let data = [
  {name: '北京市', value: '100'}, {name: '天津市', value: randomData()},
  {name: '上海市', value: randomData()}, {name: '重庆市', value: randomData()},
  {name: '河北省', value: randomData()}, {name: '河南省', value: randomData()},
  {name: '云南省', value: randomData()}, {name: '辽宁省', value: randomData()},
  {name: '黑龙江省', value: randomData()}, {name: '湖南省', value: randomData()},
  {name: '安徽省', value: randomData()}, {name: '山东省', value: randomData()},
  {name: '新疆维吾尔自治区', value: randomData()}, {name: '江苏省', value: randomData()},
  {name: '浙江省', value: randomData()}, {name: '江西省', value: randomData()},
  {name: '湖北省', value: randomData()}, {name: '广西壮族自治区', value: randomData()},
  {name: '甘肃省', value: randomData()}, {name: '山西省', value: randomData()},
  {name: '内蒙古自治区', value: randomData()}, {name: '陕西省', value: randomData()},
  {name: '吉林省', value: randomData()}, {name: '福建省', value: randomData()},
  {name: '贵州省', value: randomData()}, {name: '广东省', value: randomData()},
  {name: '青海省', value: randomData()}, {name: '西藏自治区', value: randomData()},
  {name: '四川省', value: randomData()}, {name: '宁夏回族自治区', value: randomData()},
  {name: '海南省', value: randomData()}, {name: '台湾省', value: randomData()},
  {name: '香港特别行政区', value: randomData()}, {name: '澳门特别行政区', value: randomData()}
];

function randomData() {
  return Math.round(Math.random() * 500);
}

let geoOption = {
  backgroundColor: '#FFFFFF',
  tooltip: {
    trigger: 'item',
    formatter: '{b}<br/>{c}'
  },

  //左侧小导航图标
  visualMap: {
    show: true,
    x: 'left',
    y: 'center',
    calculable: true,
    splitList: [
      {start: 1000, end: 1100},
      {start: 900, end: 1000},
      {start: 800, end: 900},
      {start: 700, end: 800},
      {start: 600, end: 700},
      {start: 500, end: 600},
      {start: 400, end: 500},
      {start: 300, end: 400},
      {start: 200, end: 300},
      {start: 100, end: 200},
      {start: 0, end: 100},
    ],
    color: ['#a50026',
      '#d73027',
      '#f46d43',
      '#fdae61',
      '#fee090',
      '#ffffbf',
      '#e0f3f8',
      '#abd9e9',
      '#74add1',
      '#4575b4',
      '#313695']
  },

//配置属性
  series: [{
    type: 'map',
    map: 'china',
    zoom: 1.2,
    roam: true,
    selectedMode: 'single',
    label: {
      normal: {
        show: true  //省份名称
      },
      position: ['50%', '50%']
    },
    data: data,
  }]
};

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  let lineChart = echarts.init(document.getElementById('line'));
  let geoChart = echarts.init(document.getElementById('china'));

  // 绘制图表
  lineChart.setOption(lineOption);
  geoChart.setOption(geoOption);
})


</script>

<style scoped>
</style>